<template>
  <!-- 导航栏 -->
  <van-nav-bar
    title="商品详情"
    left-text="返回"
    right-text="购物车"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />
  <!-- 商品卡片 -->
  <van-card
    :num="item.goods_number"
    :origin-price="item.price > item.current_price ? item.price : null"
    :price="item.current_price"
    :desc="item.category"
    :title="item.title"
    :thumb="item.img_big_logo"
  >
    <button>加入购物车</button>
    <template #tags>
      <van-tag plain type="primary" v-if="item.is_sale">折扣</van-tag>
      <van-tag plain type="primary" v-if="item.is_hot">热卖</van-tag>
    </template>
    <!-- <template #footer>
      <van-button size="mini">-</van-button>
      <van-button size="mini">+</van-button>
    </template> -->
  </van-card>
  <div v-html="item.goods_introduce"></div>
  <!-- 回到顶部 -->
  <van-back-top right="15vw" bottom="10vh" />
  <!-- 购物车图标 -->
  <van-floating-bubble
    axis="xy"
    icon="cart-o"
    magnetic="x"
    @offset-change="onOffsetChange"
    @click="AddCart"
  />
</template>
<script>
import http from "@/utils/http.js";
export default {
  data() {
    return {
      item: {}
    };
  },
  methods: {
    onClickRight() {
      this.$router.push("/cart");
    },
    async AddCart() {
      const r = await http.request({
        url: "/cart/add",
        method: "POST",
        data: {
          id: localStorage.getItem("user_id"),
          goodsId: this.item.goods_id
        }
      });
      console.log(r.data);
    },
    onOffsetChange() {
      showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);
    },
    onClickLeft() {
      this.$router.replace("/");
    }
  },
  created() {
    http
      .request({
        url: "/goods/item",
        method: "GET",
        params: {
          id: this.$route.query.id
        }
      })
      .then((v) => {
        // console.log(v);
        console.log(v.data.message, v.data.yourParams);
        this.item = v.data.info;
        console.log(this.item);
      });
  }
};
</script>
<style lang="css"></style>
